<template>
    <div id="login">
        <div class="login-from">
            <h2>中国矿业大学大数据官网后台管理系统</h2>
            <el-form label-width="0px"
                :model="form" 
                label-position="center" 
                status-icon 
                :rules="rules"
                ref="form"
                class="demo-ruleForm">
                <el-form-item prop="account">
                    <el-input placeholder="用户名"  v-model="form.account">
                        <i slot="prefix" class="iconfont el-cion-allzhanghao"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input placeholder="密码" type="password" v-model="form.pwd">
                        <i slot="prefix" class="iconfont el-cion-allziyuanxhdpi"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import api from '../api/api.js';
export default {
    data(){
        return{
            form:{
                account:"admin",
                pwd:"123456"
            },
            rules:{
                account:[
                    { required: true, message: '账号不能为空',trigger:'blur'}
                ],
                pwd:[
                    { required: true, message: '密码不能为空',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        submitForm(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    // 直接 api. get 或者 post  传入 路径和数据 不用在api里面写了
                    api.post('/user/login',this.form).then(res=>{
                        console.log(1)
                        window.sessionStorage.setItem("token",res.data.data);
                        this.$router.push({path:"/home/message"});
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                    }) 
                }else{
                    this.$message.error('登录失败');
                }
            }); 
        }
    }
}
</script>
<style scoped>
#login{
    background-color: #304156;
    height: 100vh;
}
.login-from{
    text-align: center;
    width: 550px;
    height: 320px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding: 30px 40px 0 40px;
}
.el-button{
    width: 100%;
}
</style>